<div class="main-container">
  <div class="top-nav">
    <div class="header">
    <div class="header-left">
      <img src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg" alt="Logo" class="logo">
      <ul class="nav-list">
        <li *ngFor="let module of modules"
            [class.active]="module === activeModule"
            (click)="selectModule(module)">
          <i nz-icon [nzType]="module.icon"></i>
          <span>{{ module.name }}</span>
        </li>
      </ul>
    </div>
    <div class="header-right">
      <a nz-dropdown [nzDropdownMenu]="userMenu">
        <div class="user-info">
          <span class="username">Admin</span>
          <i nz-icon nzType="user"></i>
        </div>
      </a>
      <nz-dropdown-menu #userMenu="nzDropdownMenu">
        <ul nz-menu>
          <li nz-menu-item (click)="logout()">
            <i nz-icon nzType="logout"></i>
            退出登录
          </li>
        </ul>
      </nz-dropdown-menu>
    </div>
  </div>
</div>
  <div class="content-container">
    <div class="side-menu" [class.collapsed]="isSideMenuCollapsed">
      <div class="collapse-button" (click)="toggleSideMenu()">
        <i nz-icon [nzType]="isSideMenuCollapsed ? 'right' : 'left'"></i>
      </div>
      <ul>
        <ng-container *ngTemplateOutlet="menuItemsTemplate; context: {$implicit: activeModule.menuItems}"></ng-container>
      </ul>
    </div>

    <div class="tab-container">
      <div class="tab-header">
        <div *ngFor="let tab of tabs; let i = index"
             class="tab" 
             [class.active]="tab.active"
             (click)="selectTab(i)">
          {{ tab.title }}
          <span class="close-tab" (click)="closeTab(i)">
            <i nz-icon nzType="close"></i>
          </span>
        </div>
      </div>
      <div class="tab-content">
        <ng-container *ngFor="let tab of tabs">
          <div *ngIf="tab.active">
            <ng-container *ngComponentOutlet="tab.component"></ng-container>
          </div>
        </ng-container>
      </div>
    </div>
 
</div>

<ng-template #menuItemsTemplate let-items>
  <ng-container *ngFor="let item of items">
    <li [class.has-children]="item.children">
      <div class="menu-item" [class.active]="item.active" (click)="toggleMenuItem(item)">
        <i nz-icon [nzType]="item.icon"></i>
        <span>{{ item.name }}</span>
        <i *ngIf="item.children" 
           nz-icon 
           [nzType]="item.expanded ? 'down' : 'right'" 
           class="expand-icon"></i>
      </div>
      
      <ul *ngIf="item.children && item.expanded" class="sub-menu">
        <ng-container *ngTemplateOutlet="menuItemsTemplate; context: {$implicit: item.children}"></ng-container>
      </ul>
    </li>
  </ng-container>
</ng-template>
